<template>
  <div class="container">
    <div class="search">
      <el-form inline :model="searchForm">
        <el-form-item label="请选择站点：">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-refresh-right">刷新</el-button>
      </el-form>
    </div>
    <div class="headbox">
      <div class="card">
        <h3>浏览量PV</h3>
        <p>9999</p>
        <p>昨日PV</p>
      </div>
      <div class="card">
        <h3>独立用户UV</h3>
        <p>999</p>
        <p>昨日UV</p>
      </div>
      <div class="card">
        <h3>询盘量</h3>
        <p>999999</p>
        <p>累计询盘量</p>
      </div>
      <div class="card">
        <h3>询盘量</h3>
        <p>99</p>
        <p>昨日询盘量</p>
      </div>
    </div>
    <div class="tabbox">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="网站浏览量" name="first">网站浏览量</el-tab-pane>
        <el-tab-pane label="独立用户" name="second">独立用户</el-tab-pane>
        <el-tab-pane label="跳出率" name="third">跳出率</el-tab-pane>
        <el-tab-pane label="在线时长" name="fourth">在线时长</el-tab-pane>
      </el-tabs>
      <el-tabs v-model="activeName2">
        <el-tab-pane label="用户管理" name="first">国家访问占比</el-tab-pane>
      </el-tabs>
    </div>
    <div class="echartsbox">
      <p>询盘统计</p>
      <div class="echarts">
        <div class="linechart" />
        <div class="linechart" />
        <div class="linechart" />
      </div>

    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      searchForm: {},
      activeName: 'first',
      activeName2: 'first',
      options: [{
        value: '选项1',
        label: '站点1'
      }, {
        value: '选项2',
        label: '站点2'
      }, {
        value: '选项3',
        label: '站点3'
      }, {
        value: '选项4',
        label: '站点4'
      }, {
        value: '选项5',
        label: '站点5'
      }],
      value: ''
    }
  },
  methods: {
    handleClick(tab, event) {

    }
  }
}
</script>
<style lang="scss" scoped>
.search{
    background-color: #fff;
    padding: 15px 10px;
    .el-form-item{
        margin-bottom: 0;
    }
    .el-button {
        font-size: 14px;
    }
}
.headbox{
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    .card{
        background-color: #fff;
        padding: 10px;
        width: calc(25% - 10px);
        font-size: 14px;
        h3{
            font-weight: normal;
            border-bottom: solid 1px #f5f7f9;
            margin: 0;
            padding-bottom: 15px;
            padding-top: 5px;
        }
        p{
            color: rgba($color: #000000, $alpha: 0.65);
            padding: 15px 0;
        }
    }
}
.tabbox{
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    .el-tabs{
        width: calc(50% - 7px);
        background-color: #fff;
        padding: 10px;
        height: 500px;
    }
}
.echartsbox{
    background-color: #fff;
    padding: 10px;
    margin-top: 15px;
    height: 400px;
    p{
        border-bottom: solid 1px #f5f7f9;
       padding: 5px 0 15px ;
    }
}
</style>
